<template>
  <!-- 推理应用-->
  <div v-show="visiable" class="drawer-box-wrapper left-box">
    <div class="taskCase_container" style="margin-bottom: 10px;">
      <h2>推理应用</h2>
    </div>

    <div class="text-align-right m-b-10" v-show="!isDisabled">
      <el-button size="small" type="primary" @click="displayCoordinates"
        >显示坐标</el-button
      >
      <el-button size="small" type="primary" @click="handleAdd">添加</el-button>
    </div>
    <el-table stripe :data="formData.mbzbList" height="45vh">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="经度" prop="pointJd" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.pointJd"
            maxlength="30"
            v-max-length-tip="30"
            v-no-space
            clerable
            :disabled="isDisabled"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="纬度" prop="pointWd" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.pointWd"
            maxlength="30"
            v-max-length-tip="30"
            v-no-space
            clerable
            :disabled="isDisabled"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip v-show="!isDisabled">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleRemove(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-form
      :label-position="labelPosition"
      :model="formData"
      size="small"
      ref="ruleForm"
      :rules="rules"
      label-width="120px"
      style="margin-top: 10px;"
      :disabled="isDisabled"
    >
      <div class="flex">
        <el-form-item label="需求名称：" class="item-width" prop="mhxqmc">
          <el-input
            v-no-space
            v-max-length-tip="30"
            clearable
            v-model="formData.mhxqmc"
            placeholder="请输入需求名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="任务来源：" class="item-width" prop="rwly">
          <el-input
            v-no-space
            v-max-length-tip="30"
            clearable
            v-model="formData.rwly"
            placeholder="请输入任务来源"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="场景名称：" class="item-width" prop="cjmc">
          <el-select v-model="formData.cjmc">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>

      <div class="flex">
        <el-form-item label="观测开始时间：" class="item-width" prop="kssj">
          <el-date-picker
            style="width:100%"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="formData.kssj"
            placeholder="请选择观测开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="观测结束时间："
          class="item-width"
          prop="jssj"
          style="width: 50%;"
        >
          <el-date-picker
            style="width:100%"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="formData.jssj"
            placeholder="请选择观测结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="目标编号：" class="item-width" prop="mbbh">
          <el-input
            clearable
            v-no-space
            v-max-length-tip="30"
            v-model="formData.mbbh"
            placeholder="请输入目标编号"
          ></el-input>
        </el-form-item>
      </div>

      <div class="flex">
        <el-form-item label="目标名称：" class="item-width" prop="mbmc">
          <el-select v-model="formData.mbmc">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标类型：" class="item-width" prop="mblx">
          <el-input
            clearable
            v-no-space
            v-max-length-tip="30"
            v-model="formData.mblx"
            placeholder="请输入目标类型"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="国家地区：" class="item-width" prop="gjdq">
          <el-input
            clearable
            v-no-space
            v-max-length-tip="30"
            v-model="formData.gjdq"
            placeholder="请输入国家地区"
          >
          </el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="需求优先级：" class="item-width" prop="xqyxj">
          <el-input
            clearable
            v-no-space
            v-only-number
            type="number"
            :min="0"
            :max="30"
            v-max-length-tip="30"
            v-model="formData.xqyxj"
            placeholder="请输入需求优先级"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="频次：" class="item-width" prop="pc">
          <el-input
            clearable
            v-no-space
            v-only-number
            type="number"
            :min="0"
            :max="30"
            v-max-length-tip="30"
            v-model="formData.pc"
            placeholder="请输入频次"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="载荷类型：" class="item-width" prop="zhlx">
          <el-input
            clearable
            v-no-space
            v-max-length-tip="30"
            v-model="formData.zhlx"
            placeholder="请输入载荷类型"
          >
          </el-input>
        </el-form-item>
      </div>

      <div class="flex">
        <el-form-item label="最大分辨率(m)：" class="item-width" prop="maxfbl">
          <el-input
            clearable
            v-no-space
            v-max-length-tip="10"
            v-only-number
            type="number"
            :min="0"
            :max="30"
            v-model="formData.maxfbl"
            placeholder="请输入最大分辨率"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="最小分辨率(m)：" class="item-width" prop="minfbl">
          <el-input
            clearable
            v-no-space
            v-only-number
            type="number"
            :min="0"
            :max="30"
            v-max-length-tip="10"
            v-model="formData.minfbl"
            placeholder="请输入最小分辨率"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="网格编号："
          class="item-width belt-btn"
          prop="wgbh"
        >
          <el-button
            size="small"
            type="primary"
            style="margin-left: 6px;"
            @click="dialogVisible1 = true"
            >网格编号</el-button
          >
        </el-form-item>
      </div>

      <div class="flex">
        <el-form-item
          label="卫星列表："
          class="item-width belt-btn"
          prop="wxlb"
        >
          <el-button
            size="small"
            type="primary"
            style="margin-left: 6px;"
            @click="dialogVisible2 = true"
            >卫星列表</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <div class="text-align-center" v-show="!isDisabled">
      <el-button
        size="small"
        type="primary"
        @click="programevaluation('ruleForm')"
        >确定</el-button
      >
    </div>

    <el-dialog title="网格编号" :visible.sync="dialogVisible1" append-to-body>
      <div class="text-align-right m-b-10" v-show="!isDisabled">
        <el-button
          size="small"
          type="primary"
          @click="addGrid"
          v-show="!isDisabled"
          >添加</el-button
        >
      </div>
      <el-table stripe :data="formData.wgbh" height="45vh">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="网格编号" prop="wgbh" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.wgbh"
              maxlength="30"
              v-max-length-tip="30"
              v-no-space
              clerable
              :disabled="isDisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip v-show="isDisabled">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleRemoveGrid(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span class="dialog-footer" slot="footer">
        <el-button type="primary" @click="dialogVisible1 = false"
          >确定</el-button
        >
        <el-button @click="dialogVisible1 = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="卫星列表" :visible.sync="dialogVisible2" append-to-body>
      <div class="text-align-right m-b-10" v-show="!isDisabled">
        <el-button size="small" type="primary" @click="addSatellite"
          >添加</el-button
        >
      </div>
      <el-table stripe :data="formData.wxlb" height="45vh">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="卫星名称" prop="wxlb" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.wxlb"
              maxlength="30"
              v-max-length-tip="30"
              v-no-space
              clerable
              :disabled="isDisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip
          v-show="!isDisabled"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleRemoveSatellite(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span class="dialog-footer" slot="footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确定</el-button
        >
        <el-button @click="dialogVisible2 = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script src="./left.js"></script>

<style src="../index.scss" lang="scss"></style>
